<template>
    <div class="login-p">
        <div class="login-card">
            <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="left" label-width="100px">
                <el-form-item label="会议号" prop="meetingRoomId">
                    <el-input v-model="loginForm.meetingRoomId" placeholder="请输入会议号"
                              @input="loginForm.meetingRoomId = loginForm.meetingRoomId.replace(/[\u4E00-\u9FA5]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="入会名称" prop="userName">
                    <el-input v-model="loginForm.userName" placeholder="请输入入会名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 100%" type="primary" @click="submitForm('loginForm')">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: "Login",
    data(){
        return {
            loginForm: {
                meetingRoomId: '',// 会议id
                userName: ''// 入会名称
            },
            rules: {
                meetingRoomId: [ { required: true, message: '请输入会议号', trigger: 'blur' } ],
                userName: [ { required: true, message: '请输入入会名称', trigger: 'blur' } ],
            }
        }
    },
    methods:{
        /**
         * 获取uuid
         * @param {Number} len - 长度
         * @param {Number} radix - 基数
         */
        getUUIDStr(len, radix) {
            let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
            let uuid = [],i;
            radix = radix || chars.length;
            if (len) {
                for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
            } else {
                let r;
                uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
                uuid[14] = '4';
                for (i = 0; i < 36; i++) {
                if (!uuid[i]) {
                    r = 0 | Math.random() * 16;
                    uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                }
                }
            }
            return uuid.join('');
        },
        submitForm(formName){
            const {meetingRoomId,userName} = this.loginForm;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                // 跳转转写页面
                    this.$router.push({
                        path: '/room',
                        query: {
                            roomId: meetingRoomId,
                            userName
                        }
                    });
                } else {
                    return false;
                }
            });
        }
    },
    created(){
        const {roomId} = this.$route.query;
        this.loginForm.meetingRoomId = roomId?roomId:this.getUUIDStr(5,16);
        // this.loginForm.userName = '张三'+this.getUUIDStr(8,16);
    }
}
</script>

<style scoped>
.login-p{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card{
width: 400px;
-webkit-app-region: no-drag;
}
::v-deep .el-form-item__label{
color: unset;
}
</style>
